HTMLify
index.html
Views: 453 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 | <!-- Based on Learn How To Build A Website In 1 Hour! by Kyle Cook - Web Dev Simplified (2019) see: https://www.youtube.com/watch?v=RZ-Oe4_Ew7g --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Soundwave</title> </head> <body> <div class="container full-height-grow"> <header class="main-header"> <a href="#" class="brand-logo"> <img src="https://i.ibb.co/yRkkT0M/logo.png" /> <h1 class="brand-logo-name">Soundwave</h1> </a> <nav class="main-nav"> <ul> <li><a href="#discover">Discover</a></li> <li><a href="#join">Join</a></li> </ul> </nav> </header> <!-- hero --> <section class="hero-section"> <div class="img-wrapper"> <div class="lady-image"></div> </div> <div class="call-to-action"> <h1 class="title">Feel The Music</h1> <span class="subtitle" >Stream over 20 thousand songs with one click</span > <a href="#join" class="btn">Join Now</a> </div> </section> <div class="hero-circle-1"></div> <div class="hero-circle-2"></div> <div class="hero-circle-3"></div> </div> <!-- discover --> <div class="alternate-background"> <div class="container full-height-grow"> <section class="discover-section" id="discover"> <div class="call-to-action"> <h1 class="title">Discover new music</h1> <div class="icon-section"> <div class="icon"> <svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M34.9335 25.6703C32.5665 27.5648 17.0662 39.9758 13.4775 42.8513L7.40922 36.783L24.6622 15.399L34.9335 25.6703ZM46.8787 3.46952C42.255 -1.15423 34.7557 -1.15423 30.132 3.46952C27.0832 6.52052 26.8245 9.86402 26.676 11.0498L39.2985 23.6723C40.3875 23.5508 43.803 23.292 46.8787 20.2163C51.5047 15.5925 51.5047 8.09327 46.8787 3.46952ZM24.7522 43.8345C19.5952 43.8345 17.2395 47.0453 13.9162 49.1333C11.5627 50.6093 9.33522 49.86 8.26422 48.5348C7.87497 48.06 6.76347 46.35 8.65572 44.3903L8.37447 44.109L5.84097 41.6543C2.75397 44.8403 3.30072 48.6473 5.21322 51.0075C7.40697 53.7165 11.8192 55.0845 16.002 52.4588C19.5682 50.22 21.1477 47.7608 24.7522 47.7608C27.0832 47.7608 29.2072 48.8048 32.5935 54L35.8807 51.858C32.7465 47.043 29.6527 43.8345 24.7522 43.8345Z" fill="#EAEAEA" /> </svg> Charts </div> <div class="icon"> <svg width="57" height="54" viewBox="0 0 57 54" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0)"> <path d="M50.8205 23.9805L56 27L28.9955 42.75L2 27L7.17725 23.9805L28.9955 36.711L50.8205 23.9805ZM28.9955 47.9588L7.17725 35.2282L2 38.25L28.9955 54L56 38.25L50.8205 35.2305L28.9955 47.9588ZM56 15.75L28.9955 0L2 15.75L28.9955 31.5L56 15.75Z" fill="#EAEAEA" /> </g> <defs> <clipPath id="clip0"> <rect width="54" height="54" fill="white" transform="translate(2)" /> </clipPath> </defs> </svg> Albums </div> <div class="icon"> <svg width="56" height="54" viewBox="0 0 56 54" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0)"> <g clip-path="url(#clip1)"> <path d="M28.0072 4.5C40.5922 4.5 50.8309 14.5935 50.8309 27C50.8309 39.4065 40.5922 49.5 28.0072 49.5C15.4222 49.5 5.18346 39.4065 5.18346 27C5.18346 14.5935 15.4222 4.5 28.0072 4.5ZM28.0072 0C12.8819 0 0.618713 12.0893 0.618713 27C0.618713 41.9108 12.8819 54 28.0072 54C43.1325 54 55.3957 41.9108 55.3957 27C55.3957 12.0893 43.1325 0 28.0072 0ZM32.572 27L22.3013 37.125L25.7865 40.5L39.4191 27L25.7865 13.5L22.3013 16.875L32.572 27Z" fill="#EAEAEA" /> </g> </g> <defs> <clipPath id="clip0"> <rect width="54.777" height="54" fill="white" transform="translate(0.618713)" /> </clipPath> <clipPath id="clip1"> <rect width="54.777" height="54" fill="white" transform="translate(0.618713)" /> </clipPath> </defs> </svg> More </div> </div> By joining you can enjoy the latest albums released. </div> <img class="covers-image" src="https://i.ibb.co/Q8248V3/covers.jpg" /> </section> </div> </div> <!-- join --> <div class="circles"> <div class="container full-height-grow"> <section class="join-section" id="join"> <h1 class="join-text"> Join the <span class="accent-text">fun.</span> </h1> <form class="join-form"> <div class="input-group"> <label>Name</label> <input type="text" /> </div> <div class="input-group"> <label>Email</label> <input type="email" /> </div> <div class="input-group"> <label>Password</label> <input type="password" /> </div> <div class="input-group"> <button type="submit" class="btn">Join Now</button> </div> </form> </section> </div> <div class="join-circle-1"></div> <div class="join-circle-2"></div> </div> <!-- footer --> <footer class="main-footer"> <div class="container"> <nav class="footer-nav"> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <nav class="footer-nav"> <ul> <li> <a href="#" class="social-link"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0)"> <path d="M24 4.55705C23.117 4.94905 22.168 5.21305 21.172 5.33205C22.189 4.72305 22.97 3.75805 23.337 2.60805C22.386 3.17205 21.332 3.58205 20.21 3.80305C19.313 2.84605 18.032 2.24805 16.616 2.24805C13.437 2.24805 11.101 5.21405 11.819 8.29305C7.728 8.08805 4.1 6.12805 1.671 3.14905C0.381 5.36205 1.002 8.25705 3.194 9.72305C2.388 9.69705 1.628 9.47605 0.965 9.10705C0.911 11.388 2.546 13.522 4.914 13.997C4.221 14.185 3.462 14.229 2.69 14.081C3.316 16.037 5.134 17.46 7.29 17.5C5.22 19.123 2.612 19.848 0 19.54C2.179 20.937 4.768 21.752 7.548 21.752C16.69 21.752 21.855 14.031 21.543 7.10605C22.505 6.41105 23.34 5.54405 24 4.55705Z" fill="white" /> </g> <defs> <clipPath id="clip0"> <rect width="24" height="24" fill="white" /> </clipPath> </defs> </svg> Twitter </a> </li> <li> <a href="#" class="social-link"> <svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0)"> <path d="M22.675 0H1.325C0.593 0 0 0.543583 0 1.21458V20.7863C0 21.4564 0.593 22 1.325 22H12.82V13.4805H9.692V10.1603H12.82V7.71192C12.82 4.87025 14.713 3.32292 17.479 3.32292C18.804 3.32292 19.942 3.41367 20.274 3.454V6.424L18.356 6.42492C16.852 6.42492 16.561 7.08033 16.561 8.041V10.1613H20.148L19.681 13.4814H16.561V22H22.677C23.407 22 24 21.4564 24 20.7854V1.21458C24 0.543583 23.407 0 22.675 0V0Z" fill="white" /> </g> <defs> <clipPath id="clip0"> <rect width="24" height="22" fill="white" /> </clipPath> </defs> </svg> Facebook </a> </li> </ul> </nav> </div> </footer> </body> </html> |